import { Button } from '@/components/ui/button'
import { cn } from "@/lib/utils"
import { ChevronRight, X } from 'lucide-react'
import React from 'react'
import ReactMarkdown from 'react-markdown'

interface StandardLibraryProps {
  state: string
  onStateChange: (state: string) => void
}

const StandardLibrary: React.FC<StandardLibraryProps> = ({ state, onStateChange }) => {
  return (
    <div
      className={cn(
        "fixed top-16 right-0 h-[calc(100vh-4rem)] bg-background border-l transition-all duration-300 ease-in-out overflow-hidden",
        state === 'closed' ? 'w-0' : 'w-96'
      )}
    >
      <div className="flex items-center justify-between p-4 border-b">
        <h2 className="text-lg font-semibold whitespace-nowrap">标准规范</h2>
        <Button variant="ghost" size="icon" onClick={() => onStateChange(state === 'closed' ? 'open' : 'closed')}>
          {state === 'closed' ? <ChevronRight className="h-4 w-4" /> : <X className="h-4 w-4" />}
        </Button>
      </div>
      <div className="p-4 overflow-auto h-[calc(100%-4rem)] relative">
        <ReactMarkdown>
          {`# 标准规范内容

这里是标准规范的Markdown内容。

## ESG报告标准

- GRI标准
- SASB标准
- TCFD建议

## 行业最佳实践

1. 环境管理体系
2. 社会责任实践
3. 公司治理准则

### 法律法规

- 环境保护法
- 劳动法
- 公司法`}
        </ReactMarkdown>
      </div>
    </div>
  )
}

export default StandardLibrary